<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
v-for指令
1.用于展示列表数据
2.语法：v-for=(item,index)in xxx :key="yyy"
3.可遍历:数组、对象、字符串、指定次数 后面两个用得少        
     -->
</head>

<body>
    <div id="root">
        <!-- 一般都需要配置一个key 这样就不能两个相同的id -->
        <ul>
            <li v-for="(p,index) in persons" :key="p.id">
                {{p}}---{{index}}---{{p.name}}---{{p.age}}
            </li>
        </ul>

        <br><br><br><br><br><br>


        <h2>汽车信息</h2>
        <ul>
            <li v-for="(value,k) in cars" :key="k">{{value}}--{{k}}</li>
        </ul>
        <br><br><br><br><br><br>


        <h2>字符串</h2>
        <ul>
            <li v-for="(char,index) of str" :key="index">{{char}}---{{index}}</li>
        </ul>
        <br><br><br><br><br><br>


        <h2>遍历指定次数</h2>
        <ul>
            <li v-for="(number,index) in 5" :key="index">{{number}}--{{index}}</li>
        </ul>

    </div>


    <script src="../vue.js"></script>
    <script>
        Vue.config.productionTip = false
        new Vue({
            el: "#root",
            data: {
                persons: [
                    {id:'001',name:'张三',age:'18'},
                    {id:'002',name:'李四',age:'18'},
                    {id:'003',name:'王五',age:'18'}
                ],
                cars:{
                    name:'奥迪a8',
                    price:'70万',
                    color:'黑色'
                },
                str:'hello'
            }
        })
    </script>
</body>

</html>